<!DOCTYPE html>
<html lang="en-US">
  <head>
    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
    <script crossorigin="anonymous" src="/test-harness.js"></script>
    <script crossorigin="anonymous" src="/test-page-object.js"></script>
    <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
  </head>
  <body>
    <main id="webchat"></main>
    <script>
      function createDirectLineForTest(options) {
        const workingDirectLine = WebChat.createDirectLine(options);

        return {
          activity$: workingDirectLine.activity$,
          connectionStatus$: workingDirectLine.connectionStatus$,
          postActivity: activity =>
            activity.type === 'message' ? new Observable(() => {}) : workingDirectLine.postActivity(activity)
        };
      }

      run(async function () {
        const clock = lolex.createClock();

        const { directLine, store } = testHelpers.createDirectLineEmulator({ ponyfill: clock });

        async function createWebChat() {
          let props = {
            directLine,
            ponyfill: clock,
            store,
            styleOptions: {
              sendTimeout: 5000
            }
          };

          const render = () => WebChat.renderWebChat(props, document.getElementById('webchat'));

          render();

          return {
            updateProps: updater => {
              props = updater(props);
              render(props);
            }
          };
        }

        const { updateProps } = await createWebChat();

        await pageConditions.webChatRendered();

        // Advance 1 second for the connection status prompt to be gone.
        clock.tick(1000);

        await pageConditions.uiConnected();

        // WHEN: Send a message without acknowledging it.
        await directLine.actPostActivity(() =>
          pageObjects.sendMessageViaSendBox('echo Hello, World!', { waitForSend: false })
        );

        // WHEN: After 5 seconds.
        clock.tick(5000);

        // THEN: The activity status should become "Send failed. Retry."
        await pageConditions.became(
          'turn into "Send failed. Retry."',
          () => pageElements.activityStatuses()[0]?.innerText === 'Send failed. Retry.',
          1000
        );

        // THEN: The screen should show "Send failed. Retry."
        await host.snapshot();

        // WHEN: The send timeout is changed to 10 seconds.
        updateProps(props => updateIn(props, ['styleOptions', 'sendTimeout'], () => 10000));

        // THEN: The activity status should become "Sending."
        await pageConditions.became(
          'turn into "Sending"',
          () => pageElements.activityStatuses()[0]?.innerText === 'Sending',
          1000
        );

        // THEN: The screen should show "Sending."
        await host.snapshot();

        // WHEN: After 5 seconds.
        clock.tick(5000);

        // THEN: The activity status should become "Send failed. Retry."
        await pageConditions.became(
          'turn into "Send failed. Retry."',
          () => pageElements.activityStatuses()[0]?.innerText === 'Send failed. Retry.',
          1000
        );

        // THEN: The screen should show "Send failed. Retry."
        await host.snapshot();
      });
    </script>
  </body>
</html>
